$(function(){
  // 获取WEB存储
  let city_name = localStorage.getItem("city_name") || "请手动选择";
  $(".city .choose-city").html(city_name);
  // 切换城市移入显示 
  $(".area .change-city").mouseover(function () {
    $(".area .box").show();  
  });
  // 切换城市移出隐藏
  $(".area").mouseleave(function () {
    $(".area .box").hide();
  });
  // 标题特效
  $(".tab li").click(function () {
    let index = $(this).index();
    // 标题
    $(this).siblings().removeClass("cur");
    $(this).addClass("cur");
    // 内容
    $(".tab-content").hide();
    $(".tab-content").eq(index).show();
  });
  // 内容特效
  $(".tab-content").on("click", "a", function () {
    // 数据
    let title = $(this).text();
    let index = $(this).parents(".tab-content").index();
    // 当前选中
    $(".tab-content")
      .eq(index - 1)
      .find(".city")
      .removeClass("cur");
    $(this).parents(".city").addClass("cur");
    // 标题
    $(".tab li")
      .eq(index - 1)
      .text(title);
    if (index == 3) return;
    $(".tab li").removeClass("cur");
    $(".tab li").eq(index).addClass("cur");
    // 下一个显示
    $(".tab li").eq(index).show();
    $(".tab-content")
      .eq(index - 1)
      .hide();
    $(".tab-content").eq(index).show();
  });
  // 内容选中
  $(".tab-content").on("click", "span", function () {
    let title = $(this).prev().text();
    let areaId = $(this).parents(".city").attr("area-id");
    $(".area .box").hide();
  });
  // 选择存储
  $(".tab-content").on("click", "span", function () {
    let title = $(this).prev().text();
    let areaId = $(this).parents(".city").attr("area-id");
    localStorage.setItem("city_name", title);
    localStorage.setItem("city_id", areaId);
    // $('.city .choose-city').html(title)
    location.reload();
  });
})



 //默认省份数据
 $.get('/api/area/index.jsp',{
  type:'一级',
  pid:1
},res=>{
  // console.log(res);
  let html=''
  $.each(res.data,(index,item)=>{
      html+=`
      <div class="city" area-id="${item.area_id}">
      <a href="javascript:;">${item.area_name}</a>
      <span>-</span>
      </div>
      `
  })
  $('.tab-content:eq(0)').html(html)
},'json')
  //后续城市数据
$('.area .tab-content').on('click','a',function(){
  let index=$(this).parents('.tab-content').index()
  if([1,2].indexOf(index)===-1) return
  let type=['二级','三级'][index-1]
  let pid=$(this).parents('.city').attr('area-id')
  $.get('/api/area/index.jsp',{
      type,
      pid
  },res=>{
      // console.log(res);
      let html=''
      $.each(res.data,(index,item)=>{
      html+=`
          <div class="city" area-id="${item.area_id}">
          <a href="javascript:;">${item.area_name}</a>
          <span>-</span>
          </div>
      `
      })
      $('.tab-content').eq(index).html(html)
  },'json')
})

